var preview;

$(document).ready(function() {

	var api = $.Jcrop('#comic img',{
		onSelect: showCoords2,
		onChange: showCoords
	 });
	 
	$('.jcrop-holder').append('<div id="addButton"></div>');
	$('#addButton').hide().click(function(){
		//Add a new transition
		var transition = new Transition( $('#x').val(), $('#y').val(), $('#x2').val(), $('#y2').val(), $('#w').val(), $('#h').val());
		preview.addTransition(transition);	
	});

	preview = new Preview("timeline", "strip");
	preview.setJCrop(api);
	
	$('#data').append('<input type="hidden" id="x" /><input type="hidden" id="y" /><input type="hidden" id="w" />' + 
					  '<input type="hidden" id="x2" /><input type="hidden" id="y2" /><input type="hidden" id="h" />');
	
	
	
	
	$('#saveSequence').click(function(){
		var data = {"transitions" : JSON.stringify(preview), "name" : $("#sequenceName").val()}
		// Send the request
		$.post('/comic/add', data, function(response) {
			if(response.message == "success"){
				//Clear the transitions
				preview.clearTransitions();
				//Adding the new comic transition to the select
				$("<option/>").attr('value', response.comic.id).html(response.comic.name).appendTo("#comics");
			} else {
			}
		}, "json");
	});
	
	
	$('#loadSequence').click(function(){
		var data = {"id" :  $("#comics").val()}
		// Send the request
		$.get('/comic/get', data, function(response) {
			if(response.message == "success"){
				response.comic.transitions.forEach(function(it){
					var transition = new Transition(it.x, it.y, it.x2, it.y2, it.w, it.h);
					preview.addTransition(transition);	
				
				});
			} else {
			}
		}, "json");
	});
	
	
	$("#clearSequence").click(function(){
		preview.clearTransitions();
	
	});
	
	
	$("#playSequence").click(function(){
	
		
	
	});

});

 function showCoords(c) {
	 
	 isertAddButton(c);
	 
	 $('#x').val(c.x);
	 $('#y').val(c.y);
	 $('#x2').val(c.x2);
	 $('#y2').val(c.y2);
	 $('#w').val(c.w);
	 $('#h').val(c.h);
	 $("#header").text(c.x + " - " + c.y + " - " + c.x2 + " - " + c.y2 + " - " + c.w + " - " + c.h);
};

function showCoords2(c) {
	
	isertAddButton(c);
	
	
	 $('#x').val(c.x);
	 $('#y').val(c.y);
	 $('#x2').val(c.x2);
	 $('#y2').val(c.y2);
	 $('#w').val(c.w);
	 $('#h').val(c.h);
	 $("#header").text(c.x + " - " + c.y + " - " + c.x2 + " - " + c.y2 + " - " + c.w + " - " + c.h);
	 //Determine if a transition is selected
	 var trans = preview.getSelectedTransition();
	 
	 if(c.w == 0 && c.h == 0){
		 //Clear selection
		 preview.clearSelected();
	 }else if(trans != null){
		 //Add the new values to the transition
		 trans.setValues(c.x, c.y, c.x2, c.y2, c.w, c.h);
		 preview.createPreviewImage(trans,  $('#timeline ul li.selected').attr("id"));
	 }
};

function isertAddButton(c){
	var $sel = $(".crop:visible");
	if($sel.length > 0){
		$('#addButton').show();
	}else{
		$('#addButton').hide();
	}
	$('#addButton').css('top', c.y);
	$('#addButton').css('left', c.x2 + 6);
}











